<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="./css/mycss.css" />
		<script src="./vue/vue.js"></script>
		<title>中山大学官网</title>
	</head>
	<body>
		<div id="app">
			<div class="index_header">
				<div id="header">
					<div class="logo">
						<img src="./img/logo.jpg">
					</div>
					<div id="search">
						<input id="search_input" placeholder="键入文字以搜索" />
						<button id="search_button">搜索</button>
					</div>
				</div>
			</div>

			<div class="index_nav">
				<div id="nav_one">
					<!-- <div style="width: 20px;height: 1.875rem;background-color: #000000;"v-show="subnav[0]"></div> -->

					<a href="#" style="background-image: url(./img/home.gif); margin: 4px;"></a>
					<a href="#" @mouseenter="change_subnav(0)" :class="{highligh:subnav[0]}">学校概况</a>
					<a href="#" @mouseenter="change_subnav(1)" :class="{highligh:subnav[1]}">机构设置</a>
					<a href="#" @mouseenter="change_subnav(2)" :class="{highligh:subnav[2]}">学科与师资</a>
					<a href="#" @mouseenter="change_subnav(3)" :class="{highligh:subnav[3]}">教育教学</a>
					<a href="#" @mouseenter="change_subnav(4)" :class="{highligh:subnav[4]}">开学研究</a>
					<a href="#" @mouseenter="change_subnav(5)" :class="{highligh:subnav[5]}">招生与就业</a>
					<a href="#" @mouseenter="change_subnav(6)" :class="{highligh:subnav[6]}">图书馆</a>
					<a href="#" @mouseenter="change_subnav(7)" :class="{highligh:subnav[7]}">人才招聘</a>
					<a href="#" @mouseenter="change_subnav(8)" :class="{highligh:subnav[8]}">校友与基金</a>
					<a href="#" @mouseenter="change_subnav(9)" :class="{highligh:subnav[9]}">走进中大</a>
				</div>
				<div id="nav_two">
					<div id="subnav">
						<div id="subnav2" class="hidecontent" :class="{not_hide:subnav[0]}">
							<a href="#">中大简介</a> 　
							<a href="#">中大校区</a>　 　
							<a href="#">现任领导</a>　 　
							<a href="#">校歌 校训 校徽</a>　 　
							<a href="#">数字中大</a>　 　
							<a href="#">中大校史</a>　 　
							<a href="#">中大图志</a>
						</div>


						<div id="subnav3" class="hidecontent" :class="{not_hide:subnav[1]}">
							<a href="#">学院、直属系</a>　 　
							<a href="#">管理服务机构</a>　 　
							<a href="#">附属医院</a>
						</div>


						<div id="subnav4" class="hidecontent" :class="{not_hide:subnav[2]}">
							<a href="#">学科建设</a>　 　
							<a href="#">人才名录</a>　 　
							<a href="#">名师垂范</a>
						</div>



						<div id="subnav5" class="hidecontent" :class="{not_hide:subnav[3]}">
							<a href="#">本科教育</a>　 　
							<a href="#">研究生教育</a>　 　
							<a href="#">国际教育</a>　 　
							<a href="#">继续教育</a>
						</div>



						<div id="subnav6" class="hidecontent" :class="{not_hide:subnav[4]}">
							<a href="#">重大科技创新平台</a>　 　
							<a href="#">重点研究机构</a>　 　
							<a href="#">学术期刊</a>　 　
							<a href="#">博士后科研流动站</a>
						</div>



						<div id="subnav7" class="hidecontent" :class="{not_hide:subnav[5]}">
							<a href="#">本科招生</a>　 　
							<a href="#">研究生招生</a>　 　
							<a href="#">留学生招生</a>　 　
							<a href="#">就业指导与服务</a>
						</div>

						<div id="subnav8" class="hidecontent">
						</div>
						<div id="subnav9" class="hidecontent">
						</div>
						<div id="subnav10" class="hidecontent">
						</div>

						<div id="subnav11" class="hidecontent" :class="{not_hide:subnav[9]}">
							<a href="#">校区地图</a>　 　
							<a href="#">生活服务</a>　 　
							<a href="#">中大博物馆</a>　 　
							<a href="#">校园文化</a>
						</div>
					</div>
				</div>


			</div>
			<div class="index_main">
				<div id="pic">
					<div id="pic_left">
						<img :src="img[index]">
						<!-- <button type="button"></button> -->
						<a href="#" class="pic_left_button_l" @click="pic_up()"></a>
						<a href="#" class="pic_left_button_r" @click="pic_next()"></a>

					</div>
					<div id="pic_right">
						<a href="#">
							<img src="img/sunyatsen.jpg">
						</a>
					</div>
				</div>


				<div id="main">

					<div class="cow">
						<div id="left_one" class="column">
							<h3>
								中大新闻
								<a href="#" class="link" style="float: right;">进入>></a>
							</h3>
							<div id="content" style="height: 80%;">
								<ul>
									<li>
										<span id="time">12-20</span>
										<a href="#" title="中央宣讲团党的十九届五中全会精神宣讲报告会在广州举行，马兴瑞作宣讲报告">中央宣讲团党的十九届五中全会精神宣讲报...</a>
									</li>
									<li><span id="time">12-20</span><a href="#">我校举行校庆日向孙中山先生铜像敬献花篮..</a></li>
									<li><span id="time">12-20</span><a href="#">陈春声书记带队赴连州市柯木湾村开展脱贫...</a></li>
									<li><span id="time">12-20</span><a href="#">【“十三五”巡礼】凝心聚力共谋发展，格..</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
								</ul>
							</div>
						</div>

						<div id="left_two" class="column">
							<h3>媒体中大<a href="#" class="link" style="float: right;">进入>></a></h3>
							<div id="content" style="height: 78%;">
								<ul>
									<li>
										<span id="time">12-20</span>
										<a href="#" title="中央宣讲团党的十九届五中全会精神宣讲报告会在广州举行，马兴瑞作宣讲报告">中央宣讲团党的十九届五中全会精神宣讲报...</a>
									</li>
									<li><span id="time">12-20</span><a href="#">我校举行校庆日向孙中山先生铜像敬献花篮..</a></li>
									<li><span id="time">12-20</span><a href="#">陈春声书记带队赴连州市柯木湾村开展脱贫...</a></li>
									<li><span id="time">12-20</span><a href="#">【“十三五”巡礼】凝心聚力共谋发展，格..</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
								</ul>
							</div>
						</div>


						<div id="middle_one" class="column">
							<h3>科研专栏<a href="#" class="link" style="float: right;">进入>></a></h3>
							<div id="content" style="height: 60%;">
								<ul>
									<li>
										<span id="time">12-20</span>
										<a href="#" title="中央宣讲团党的十九届五中全会精神宣讲报告会在广州举行，马兴瑞作宣讲报告">中央宣讲团党的十九届五中全会精神宣讲报...</a>
									</li>
									<li><span id="time">12-20</span><a href="#">我校举行校庆日向孙中山先生铜像敬献花篮..</a></li>
									<li><span id="time">12-20</span><a href="#">陈春声书记带队赴连州市柯木湾村开展脱贫...</a></li>
									<li><span id="time">12-20</span><a href="#">【“十三五”巡礼】凝心聚力共谋发展，格..</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
								</ul>
							</div>
						</div>

						<div id="middle_two" class="column">
							<h3>学术预告<a href="#" class="link" style="float: right;">进入>></a></h3>
							<div id="content" style="height: 70%;">
								<ul>
									<li>
										<span id="time">12-20</span>
										<a href="#" title="中央宣讲团党的十九届五中全会精神宣讲报告会在广州举行，马兴瑞作宣讲报告">中央宣讲团党的十九届五中全会精神宣讲报...</a>
									</li>
									<li><span id="time">12-20</span><a href="#">我校举行校庆日向孙中山先生铜像敬献花篮..</a></li>
									<li><span id="time">12-20</span><a href="#">陈春声书记带队赴连州市柯木湾村开展脱贫...</a></li>
									<li><span id="time">12-20</span><a href="#">【“十三五”巡礼】凝心聚力共谋发展，格..</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
								</ul>
							</div>
						</div>

						<div id="middle_three" class="column">
							<h3>重要通知<a href="#" class="link" style="float: right;">进入>></a></h3>
							<div id="content" style="height: 65%;">
								<ul>
									<li>
										<span id="time">12-20</span>
										<a href="#" title="中央宣讲团党的十九届五中全会精神宣讲报告会在广州举行，马兴瑞作宣讲报告">中央宣讲团党的十九届五中全会精神宣讲报...</a>
									</li>
									<li><span id="time">12-20</span><a href="#">我校举行校庆日向孙中山先生铜像敬献花篮..</a></li>
									<li><span id="time">12-20</span><a href="#">陈春声书记带队赴连州市柯木湾村开展脱贫...</a></li>
									<li><span id="time">12-20</span><a href="#">【“十三五”巡礼】凝心聚力共谋发展，格..</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
									<li><span id="time">12-20</span><a href="#">【聚焦升学深造】生态学院:两个课堂相融...</a></li>
								</ul>
							</div>
						</div>
						<div id="right_one" class="column">
							<h3>用户信息导航</h3>
							<a href="#">
								<img src="./img/portal.jpg" />
							</a>
							<a href="#">
								<img src="./img/usclink01.jpg" />
							</a>
							<br />
							<!-- <a href="#" class="link" style="left: 100px; position: relative ;top: 8px">学生</a>
							<a href="#" class="link" style="left: 100px; position: relative ;top: 8px">教职工</a>
							 -->
							 <div style="position: relative;left: 40px; " >
							 <a href="info/info01/index.htm" class="link">学生</a>
							 <a href="info/info02/index.htm" class="link">教职工</a>
							 <a href="info/info03/index.htm" class="link">校友</a>
							 <a href="info/info04/index.htm" class="link">考生及访客</a>
							 </div>
						</div>



						<div id="right_two" class="column">
							<h3>专题</h3>
							<a href="#">
								<img src="img/20200203221754632812.jpg" />
							</a>
							<a href="#">
								<img src="img/20191114214645444301.jpg" />
							</a>
							<a href="#">
								<img src="img/20201112165654879074.jpg" style="margin: 35px 20px 0 15px;" />
							</a>
						</div>
					</div>
					<div id="below">
						<div id="below_one">
							<h3>公告</h3>
							<div style="margin:15px ;">
								<a href="#" class="link">中山大学2020年中外合作办学评估公示</a>　|　<a href="#" class="link">关于中山大学资金存放业务合作银行遴选项目中选结果公告发布的通知</a>　|　
								<a href="#" class="link">中山大学资金存放业务合作银行遴选公告</a>　|　<a href="#" class="link">中山大学关于征集校史陈列馆校史资料与实物的启事</a>　|　
							</div>
						</div>
						<div id="below_two">
							<a href="#" class="link">教育部</a>　|　<a href="#" class="link">广东省人民政府</a>　|　<a href="#" class="link">广州市人民政府</a>　|　<a
							 href="#" class="link">深圳市人民政府</a>　|　<a href="#" class="link">珠海市人民政府</a>　|　<a class="link" href="#">中组部干训基地</a>　|　<a
							 class="link" href="#">干部在线学习中心</a>　|　<a class="link" href="#">十九大专题</a>　<br>
							<a class="link" href="#">本科招生网</a>　|　<a class="link" href="#">信息公开网</a>　|　<a class="link" href="#">学位授予仪式</a>　|　<a
							 class="link" href="#">视觉形象识别系统</a>　|　<a class="link" href="#">定点扶贫</a>　|　　 <a class="link" href="#">中央财政科研项目资金管理政策</a>　<br>
							<a href="#" class="link">众筹科技2035：我为国家中长期科技规划建言献策</a>
						</div>
					</div>
				</div>
			</div>
			<div class="index_footer">
				<div id="footer">
					<div id="bottom_logo"><img src="./img/logo-bottom.jpg"></div>
					<div id="information_one">
						通讯地址:广州市新港西路135号 <br />邮编:510275<br />电话: 020-84112828
					</div>
					<div id="information_two">
						Address: No. 135, Xingang Xi Road, Guangzhou, P. R. China <br />postcode:510275<br />TEL: +86-20-84112828
					</div>
					<br />
					<div id="information_three" >
						中山大学版权所有
					</div>
					<a href="#" style="left: 440px; top: 20px; position: relative">
						<img src="./img/blue.png"/>
					</a>
				</div>
			</div>
		</div>

		<script src="./js/myjs.js"></script>
	</body>
</html>
